<template>
  <div class="box">
    <div class="corporation_name">
      <div>
        <div class="enterprise_icon" :style="{background:color}">{{details.shortName}}</div>
      </div>
      <div class="corporation_text">{{details.d2CorpName}}</div>
    </div>
    <div class="identity_information">评分结果</div>
    <div class="result">
      <result-echarts :value="grade"></result-echarts>
    </div>
    <!-- 评分685以上 -->
    <div class="grade_title" v-if="grade && grade >= 685">
      <div class="result_box_two grad1">A1</div>
      <div class="grade_title_text">
        685
        <div class="grade_title_textT">含以上</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 665 && grade < 685">
      <div class="result_box_two grad2">A2</div>
      <div class="grade_title_text">
        665-685
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 655 && grade < 665">
      <div class="result_box_two grad3">A3</div>
      <div class="grade_title_text">
        655-665
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 645 && grade < 655">
      <div class="result_box_two grad4">B1</div>
      <div class="grade_title_text">
        645-655
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 640 && grade < 645">
      <div class="result_box_two grad5">B2</div>
      <div class="grade_title_text">
        640-645
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 625 && grade < 640">
      <div class="result_box_two grad6">B3</div>
      <div class="grade_title_text">
        625-640
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 615 && grade < 625">
      <div class="result_box_two grad7">C1</div>
      <div class="grade_title_text">
        615-625
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 595 && grade < 615">
      <div class="result_box_two grad8">C2</div>
      <div class="grade_title_text">
        595-615
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 565 && grade < 595">
      <div class="result_box_two grad9">C3</div>
      <div class="grade_title_text">
        565-595
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 535 && grade < 565">
      <div class="result_box_two grad10">D1</div>
      <div class="grade_title_text">
        535-565
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade >= 510 && grade < 535">
      <div class="result_box_two grad11">D2</div>
      <div class="grade_title_text">
        510-535
        <div class="grade_title_textT">分</div>
      </div>
    </div>
    <div class="grade_title" v-if="grade && grade < 510">
      <div class="result_box_two grad12">D3</div>
      <div class="grade_title_text">
        510
        <div class="grade_title_textT">分以下</div>
      </div>
    </div>
    <div class="grade_title" v-if="!grade">
      <!-- <div class="result_box_two grad12">暂无数据</div> -->
      <div class="grade_title_text_null">暂无评分</div>
    </div>
    <div class="grade_contant">
      {{ rating }}
    </div>
    <div class="identity_information" style="margin-top: 20px">分析维度</div>
    <div class="analysis_dimension">
      <dimensionEcharts :dimensionList="dimensionList"></dimensionEcharts>
    </div>
    <div class="foot_text">
      注:所展示信用评分采用最新的信用评估模型算法，仅作为企
      业潜在风险情况的参考，不作为信保贷等政策类产品的评分依
      据（该类产品评分仍以地方征信报告为准）
    </div>
  </div>
</template>
<script>
import resultEcharts from "../../components/lookAround/resultEcharts.vue";
import dimensionEcharts from "../../components/lookAround/dimensionEcharts.vue";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    resultEcharts,
    dimensionEcharts,
  },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      grade: "",
      delAll: {},
      details: {},
      rating: "",
      dimensionList: [0,0,0,0,0,0],
      color:'', //标题背景色
      keyScoreDesc: {
        A1: "最好的等级，企业具有很强的还款能力，不存在明显的负面记录，在经营环境、财务水平、经营水平、管理水平、关联信用等方面具有较好的表现，抵御风险能力较强。",
        A2: "次优的等级，企业具有较强的还款能力，不存在明显的负面记录，在经营环境、财务水平、经营水平、管理水平、关联信用等方面具有较好的表现，相比来说稍弱于最好的等级。",
        A3: "优秀的信用等级，企业具有较强的还款能力，不存在明显的负面记录，在经营环境、财务水平、经营水平、管理水平、关联信用等方面具有较好的表现，相比来说稍弱于次优的等级。",
        B1: "企业具有良好的还款能力，但弱于优秀企业，在经营环境、财务水平、经营水平、管理水平等方面弱于优秀企业，不利的外部经济环境变化，可能会影响企业的偿债能力。",
        B2: "企业具有良好的还款能力，但弱于优秀企业，在经营环境、财务水平、经营水平、管理水平等方面弱于优秀企业，不利的外部经济环境变化，可能会削弱企业的偿债能力。",
        B3: "企业具有一般的还款能力，但弱于优秀企业，在经营环境、财务水平、经营水平、管理水平等方面弱于优秀企业，不利的外部经济环境变化，可能会对企业的偿债能力产生较大影响。",
        C1: "企业还款能力一般偏弱，经营管理水平、财务水平等方面表现一般，缺乏明显的竞争优势，发展前景容易受到外部环境变化的影响，存在一定的偿债风险。",
        C2: "企业还款能力一般偏弱，经营管理水平、财务水平等方面表现一般，缺乏明显的竞争优势，发展前景容易受到外部环境变化的影响，存在偏高的偿债风险。",
        C3: "企业还款能力一般较弱，经营管理水平、财务水平等方面表现一般，缺乏明显的竞争优势，发展前景非常容易受到外部环境变化的影响，存在较高的偿债风险。",
        D1: "企业还款能力较弱，企业的财务水平和经营水平存在负面的风险因素，可能导致企业未来的偿债能力进一步恶化，存在短期和中期的违约可能。",
        D2: "企业还款能力较弱，财务水平和经营水平具有明显的负面风险因素，抗风险能力较差，信用基本面较弱，发展前景不乐观，违约可能性较大。",
        D3: "企业还款能力很弱，财务水平和经营水平具有明显的负面风险因素，抗风险能力差，信用基本面很弱，发展前景不乐观，违约可能性非常大。",
      },
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    
    this.delAll = JSON.parse(this.$route.query.delAll);
    this.details = JSON.parse(this.$route.query.details);
    this.color = this.$route.query.color;
    console.log(this.delAll,'this.delAllthis.delAll')
    // this.grade = this.delAll.jkXypfxx.finalScore; //公司评分
    this.grade = this.delAll.jkXypfxx ? this.delAll.jkXypfxx.finalScore : null; //公司评分
    this.rating = this.delAll.jkXypfxx
      ? this.keyScoreDesc[this.delAll.jkXypfxx.rating2]
      : "暂无评价"; //公司评价
    if (this.delAll.jkXypfxx) {
      this.dimensionList=[]
      this.dimensionList.push(
        this.delAll.jkXypfxx.characterScore,
        this.delAll.jkXypfxx.conditionScore,
        this.delAll.jkXypfxx.corelationScore,
        this.delAll.jkXypfxx.credithistScore,
        this.delAll.jkXypfxx.financialScore,
        this.delAll.jkXypfxx.operationScore
      );
    }
    console.log(this.details,'东北烧烤')
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {}, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.box{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.enterprise_icon {
  width: 38px;
  height: 37px;
  line-height: 15px;
  padding: 4px 1px 1px 0;
  background-color: #d99d9a;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
}
.corporation_name {
  display: flex;
  padding: 10px;
}
.corporation_text {
  font-size: 17.33px;
  color: #000000;
  font-family: "PuHuiTi65";
  margin-left: 10px;
}
.identity_information {
 // background-color: #ecf3fd;
 background-image: url("~img/lookAround/title_low.png");
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  // font-weight: 600;
  background-size: 158% 100%;
  background-position-x: -120px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: "PuHuiTi65";
}
.result {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  //  background-color: palegreen;
}
.result_box_one {
  font-size: 25px;
  font-weight: 550;
}
.result_box_two {
  height: 25px;
  width: 50px;
  text-align: center;
  line-height: 25px;
  color: white;
  text-align: center;
  border-radius: 3px;
}
.grad1 {
  background-color: #239d2c;
}
.grad2 {
  background-color: #4cb369;
}
.grad3 {
  background-color: #39b1ad;
}
.grad4 {
  background-color: #20acc5;
}
.grad5 {
  background-color: #36a2e7;
}
.grad6 {
  background-color: #3888d9;
}
.grad7 {
  background-color: #eba612;
}
.grad8 {
  background-color: #f68f29;
}
.grad9 {
  background-color: #f26e00;
}
.grad10 {
  background-color: #f6622e;
}
.grad11 {
  background-color: #ee5a40;
}
.grad12 {
  background-color: #d32d18;
}
.result_box_three {
  font-size: 13px;
  margin-top: 5px;
}
.result_box {
  // background-color: #4cb369;
  width: 150px;
  text-align: center;
  margin: auto;
  margin-top: 50px;
}
.grade_title {
  display: flex;
  padding: 10px;
  margin-top: -50px;
}

.grade_title_text {
  font-size: 18px;
  font-weight: 550;
  margin-left: 10px;
  line-height: 26px;
  display: flex;
}
.grade_title_textT {
  font-size: 15px;
  line-height: 25px;
}
.grade_title_text_null {
  font-size: 18px;
  font-weight: 550;
  line-height: 26px;
  display: flex;
}
.grade_contant {
  padding: 0 10px;
  text-align: justify;
  line-height: 26px;
  font-size: 15px;
  font-family: "PuHuiTi65";
}
.analysis_dimension {
  width: 100%;
  height: 300px;
  // background-color: #9ab7d9;
}
.foot_text {
  margin-top: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: gray;
  text-align: justify;
  line-height: 22px;
}
</style>
